<template>
  <div id="app">
    <div class="layout">
      <Header />
      <div class="container">
        <div class="map-container">
          <div class="item-name">
            <div class="item-name-left"><b>轨迹图</b></div>
            <div class="item-name-right">
              <!-- <el-select v-model="value" multiple clearable collapse-tags collapse-tags-tooltip placeholder="选择车牌号"
                popper-class="custom-header" :max-collapse-tags="1" style="width: 150px" @change="onChange"
                @clear="onClear">
                <template #header>
                  <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="onCheckAll">
                    所有
                  </el-checkbox>
                </template>
<el-option v-for="item in mapStore.licensePlates" :key="item.value" :label="item.label" :value="item.value" />
</el-select> -->
              <el-button type="primary" plain size="small" :icon="RefreshLeft"
                @click="handleRenderingVehicleOnMap">返回所有</el-button>
            </div>
          </div>
          <div class="map">
            <Polyline v-if="mapStore.polylineVisible" :key="mapStore.polylineKey" />
            <Point v-if="mapStore.pointVisible" :key="mapStore.pointKey" />
            <AllPoints v-if="mapStore.allPointsVisible" :key="mapStore.allPointsKey" />
          </div>
        </div>

        <div class="trajectory-details">
          <div class="item-name">车辆信息</div>
          <VehicleInfo />

          <div class="space-15"></div>

          <div class="item-name">
            <div class="item-name-left"><b>轨迹明细</b></div>
            <div class="item-name-right">
              <b>日期区间：</b>
              <el-config-provider :locale="zhCn">
                <el-date-picker v-model="dataRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                  clearable end-placeholder="结束日期" size="small" @change="handleDatePickerChange" />
              </el-config-provider>
            </div>
          </div>
          <TrajectoryDetails />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import "element-plus/theme-chalk/el-message.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { RefreshLeft } from "@element-plus/icons-vue";
import Header from "@/components/Header.vue";
import Polyline from "@/components/Polyline.vue";
import Point from "@/components/Point.vue";
import AllPoints from "@/components/AllPoints.vue";
import VehicleInfo from "@/components/VehicleInfo.vue";
import TrajectoryDetails from "@/components/TrajectoryDetails.vue";
import { getAjaxVehicleTableData } from "@/api/getAjaxData.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const dataRange = ref("");

function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
}

const handleDatePickerChange = (val) => {
  let beginTime, endTime;
  if (val) {
    beginTime = formatTimestamp(val[0].getTime());
    endTime = formatTimestamp(val[1].getTime() + 86400000);
    if (mapStore.dateTimeRange.length === 0) {
      mapStore.dateTimeRange.push(beginTime);
      mapStore.dateTimeRange.push(endTime);
    } else {
      mapStore.dateTimeRange[0] = beginTime;
      mapStore.dateTimeRange[1] = endTime;
    }

  } else {
    beginTime = formatTimestamp(new Date().getTime() - 30 * 86400000);
    endTime = formatTimestamp(new Date().getTime());
    mapStore.dateTimeRange = [];
  }

  getAjaxVehicleTableData({
    startDateTime: beginTime,
    endDateTime: endTime,
  });

};

const handleRenderingVehicleOnMap = () => {
  mapStore.polylineVisible = false;
  mapStore.pointVisible = false;
  mapStore.allPointsVisible = true;
};

onMounted(() => {
  handleRenderingVehicleOnMap();
});
</script>

<style scoped>
@import "@/assets/main.css";

.container {
  display: flex;
  height: calc(100vh - 105px);
}

.map-container {
  height: 100%;
  flex: 1;
  padding: 1px;
  margin-left: 10px;
  min-width: 400px;
}

.map {
  height: calc(100vh - 165px);
}

.trajectory-details {
  width: 930px;
  margin-left: 10px;
  padding-right: 10px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.item-name {
  height: 50px;
  line-height: 40px;
  padding-left: 15px;
  background: url("@/assets/images/holder.png") no-repeat scroll left center;
  background-size: cover;
  color: #eee;
  font-size: 20px;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}

.item-name-right {
  font-size: 16px;
}

.custom-header .el-checkbox {
  display: flex;
  height: unset;
}

.el-button--primary {
  color: #333 !important;
}

.el-button--primary:hover {
  color: #fff !important;
}
</style>